<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象 '$event'</title>
    <link href="../image/favicon.ico" rel="shortcut icon">
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>number 的值为: {{ number }} </p>
        <!-- 如果 number 为偶数，则按钮背景变红，否则，取消背景颜色-->
        <!--  <button @click="add"> +n </button>  // 这是在不传参的情况下，可以使用‘e.target’-->
        <!-- vue 提供了内置变量,名字为 $event,它就是原生 DOM 的事件对象 e-->
        <button @click="add(1,$event)"> +n </button>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                number:0,
            },
            methods: {
                add(n,e){
                    this.number += n
                    console.log(e)

                    // 判断 this.number 的奇偶
                    if(this.number % 2 === 0){
                        // 为偶数
                        e.target.style.backgroundColor = 'red'

                    } else {
                        // 为奇数
                        e.target.style.backgroundColor = ''

                    }
                }
            },
        });
    </script>
</body>
</html>